<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
import axios from 'axios'
const url = "/api"
const u = ref("/api")
const fileList = ref([])

onMounted(() => {
  // 获取图片列表
  axios.post(url + '/upload/getImgs').then(res => {
    fileList.value = res.data.Data
    // console.log(res);
  })

  
})
// 保留三位小数
const toFixed = (num) => {
  return Math.round(num * 1000) / 1000
}
// 计算缩略图的宽高
const calcImgSize = (img) => {
  const { width, height } = img
  const { clientWidth, clientHeight } = document.getElementById('imgs')
  const imgRatio = width / height
  const boxRatio = clientWidth / clientHeight
  let imgWidth, imgHeight
  if (imgRatio > boxRatio) {
    imgWidth = clientWidth
    imgHeight = toFixed(clientWidth / imgRatio)
  } else {
    imgWidth = toFixed(clientHeight * imgRatio)
    imgHeight = clientHeight
  }
  return { imgWidth, imgHeight }
}
// 监听文件上传
const handleFileChange = (e) => {
  const file = e.target.files[0]
  if (!file) return
  axios({
    method: 'post',
    url: url + '/upload/uploadImage',
    data: { file },
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    console.log(res);
    fileList.value.push(res.data.FilePath)
  }).catch(err => {
    console.log(err);
  })
}
// 文件删除
const imgDelete = (item, idx) => {
  fileList.value.splice(idx, 1)
  axios({
    method: 'post',
    url: url + '/upload/deleteImage',
    data: { filePath: item }
  }).then(res => {
    console.log(res);
  }).catch(err => {
    console.log(err);
  })
}

</script>

<template>
  <div id="upfile">
    <!-- 缩略图网格 -->
    <div id="imgs">
      <TransitionGroup name="fade">
        <div class="img" v-for="(item, idx) in fileList" :key="idx">
          <img :src="'/' + item" alt="">
          <div class="imgTools">
            <el-icon>
              <Search />
            </el-icon>
            <el-icon @click="imgDelete(item, idx)">
              <Delete />
            </el-icon>
          </div>
        </div>
      </TransitionGroup>
      <div class="img imgFile">
        <div class="upload">
          <input class="inpFile" type="file" name="filedata" @change="handleFileChange">
          <el-icon>
            <Plus />
          </el-icon>
        </div>

      </div>
    </div>
  </div>
</template>

<style lang='less'>
#upfile {
  width: 100%;
  display: flex;
  justify-content: center;



  #imgs {
    @imgsHeight: 600px;
    @imgsWidth: 600px;
    width: 550px;
    border: 1px solid rgb(208, 204, 204);
    border-radius: 6px;
    padding: 1rem;
    display: inline-flex;
    flex-wrap: wrap;


    .imgFile {
      &:hover {
        border: 1px dashed #409eff;

      }
    }

    .img {
      height: (@imgsHeight/4);
      width: (@imgsHeight/4);
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      margin: 0.5rem;
      position: relative;
      // box-sizing: border-box;


      img {
        height: 100%;
        width: 100%;
        object-fit: contain;
      }

      .imgTools {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #d9d9d9;
        opacity: 0;
        transition: all 0.3s;
        border-radius: 6px;

        &:hover {
          opacity: 0.8;
        }

        .el-icon {
          font-size: 20px;
          margin: 0 0.5rem;
          cursor: pointer;
        }
      }

      .upload {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fafafa;
        border-radius: 6px;
        cursor: pointer;
        position: relative;

        // 更改icon大小
        .el-icon {
          font-size: 30px;
        }

        .inpFile {
          height: 100%;
          width: 100%;
          position: absolute;
          overflow: hidden;
          right: 0;
          top: 0;
          opacity: 0;
          cursor: pointer;
          z-index: 9999;
        }
      }
    }
  }
}
</style>